<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品组件</title>
		<script src="../vue.global.js"></script>
		<style>
			h3{
				color: royalblue;
			}
			.goods{
				width: 500px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>新闻标题</h3>
			<news-list :goods="news1"></news-list>
			<news-list :goods="news2"></news-list>
		</div>
		<template id="tpl-goods">
			<div class="goods">
				<span>作者：{{goods.name}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span>点击率：{{goods.istop}}</span>
				<hr>
				<span>{{goods.content}}</span>
			</div>
		</template>
		<script>
			const app = Vue.createApp({
				data() {
					return{
						news1:{
							name:"张三",
							istop:45879,
							content:"此处显示新闻内容"
						},
						news2:{
							name:"李四",
							istop:34579,
							content:"此处显示新闻内容"
						}
					}
				}
			})
			const Goods = {
				template:'#tpl-goods',
				props:['goods']
			}
			app.component('NewsList',Goods)
			app.mount('#app')
		</script>
	</body>
</html>